<template>
	<view class="scrool_box">
		<scroll-view class="scroll-view_left" scroll-y="true">
			<view class="scroll_left" v-for="(item,index) in categoryLeft" :key='index' :class="{'active': index === activeIndex}" @click.stop="getLabel(index, item)">
				{{ item.name}}
			</view>

		</scroll-view>
		<scroll-view class="scroll-view_right" scroll-y="true">
			<view class="scroll_right" >
			 <view v-for="(item, index) in categoryRight" :key="index" @click.stop="clickLabel(item)">
			 {{ item.name }}
			 </view>
			 </view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/course.js'
	export default {
		data() {
			return {
				categoryLeft: [],
				categoryRight:[],
				activeIndex:0
			}
		},
		methods: {
			async CateLeft() {
				const res = await api.getCategoryList()
				this.categoryLeft = res.data
				this.getLabel(0)
			},
			getLabel(index, item) {
			 // 选中样式
			 this.activeIndex = index
			 // 获取点击的分类对象			
			 const activeCategory = this.categoryLeft[index]
			 this.categoryRight = activeCategory.labelList
			 
			 },
			 clickLabel(item) {
			  const params = {labelId: item.id, name: item.name, activeIndex: this.activeIndex}
			  uni.navigateTo({
			  url: `/pages/common-search/common-search?params=${ JSON.stringify(params) }`
			  })
			  }
		},
		onLoad() {
			this.CateLeft()
			
		},
		onNavigationBarButtonTap(e){
			uni.navigateTo({
						url: '/pages/common-search/common-search'
					});
					
			
		}
	}
</script>

<style lang='scss'>
.scrool_box{
	display: flex;
	.scroll-view_left{
		flex:1;
		
		.scroll_left{
			
			padding:20px 0;
			line-height: 10px;
			text-align: center;			
			margin:30px 0;
			position: relative;
			&::before{
				position: absolute;
										content: '';
										width: 0rpx;
										height: 0rpx;
										border-right: 6rpx solid $uni-color-primary;
										border-radius: 30rpx;
										left: 0;
										top: 50%;
										transform: translateY(-50%);
										transition: .3s;
			}
		}
		.active{
			color: $mxg-text-color-blue;
			 font-size: 33rpx;
			 font-weight: bold;
			 //border-left: 3px solid blue;
			&:before{
			 height: 50rpx;
			 }
		}
		
	}
	.scroll-view_right{
		flex:3;
		.scroll_right{
			display: flex;
			flex-wrap: wrap;
		}
		.scroll_right>view{
			width: 30%;
			padding:5px 5px;
			border: 1px solid black;
			border-radius: 30px;
			margin:10px 3px;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			text-align: center;
			
		}
	}
}
</style>
